/*
Theme Name: Tom Atelier 2025
Theme URI: https://tomatelier.it/
Author: Bolsbrou
Author URI: https://bolsbrou.com/
Description: 
Version: 1.0
License: GNU General Public License v2 or later
License URI: https://www.gnu.org/licenses/gpl-2.0.html
Text Domain: tom-atelier
*/

* {
    box-sizing: border-box;
}

body {
    background-color: #e8e7e5;
    color: #000;
    font-family: 'Red Hat Display', sans-serif;
    margin:0;
}

section {
    width: 100%;
    min-height: 100dvh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    position:sticky;
    top: 0px;

    background-position: center;
    background-size: cover;
    background-repeat: no-repeat;
    background-color: #e8e7e5;

    border: 2rem solid white;

    text-align:center;

    .logo {
        z-index: 10;
        height: 12rem;
        max-width: 90%;
    }

}

section#cover, section#contact {
    justify-content: space-evenly;
    border: none;

    #tom-cover {
        position:absolute;
        top:50%;
        left: 50%;
        transform: translate(-50%, -50%);
        max-width: 1300px;
        width: 100%;
        z-index: 1;
    }
    h1 {
        font-weight: 900;
        color: white;
        z-index: 10;
        font-size: 15dvw;
        margin: 0;
    }
    #logo-cover {
        z-index: 10;
        height: 10rem;
        @media (max-width: 768px) {
            height: 5rem;
        }
    }
    #tom-atelier-cover {
        z-index: 10;
        height: 5rem;
        @media (max-width: 768px) {
            height: 3rem;
        }        
    }    
}

section#rosalia {
    background-image: url(assets/rosalia-back.jpg);
}
section#la-joya {
    background-image: url(assets/la-joya-back.jpg);
    .logo { height: 22rem}
}
section#melt {
    background-image: url(assets/melt-back.jpg);
}
section#moreneta {
    background-image: url(assets/moreneta-back.jpg);
}
section#moto-mami {
    background-image: url(assets/moto-mami-back.jpg);
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="black" fill-opacity="0.1"/></svg>'),
        url('assets/moto-mami-back.jpg');
    background-size: cover, cover; 
    background-position: center, center; 
    background-repeat: no-repeat, no-repeat;    
    .logo { height: 22rem}
}
section#enzo {
    background-image: url(assets/enzo-back.jpg);
    background-image: 
        url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%"><rect width="100%" height="100%" fill="black" fill-opacity="0.1"/></svg>'),
        url('assets/enzo-back.jpg');
    background-size: cover, cover; 
    background-position: center, center; 
    background-repeat: no-repeat, no-repeat;    
    .logo { height: 22rem}
}

section#tomart {
    background-image: url(assets/tomart-back.jpg);
    gap:4rem;
}

.btn {
    padding: 1rem 2rem;
    font-size: .8rem;
    background-color: black;
    border-radius: 4rem;
    color: white;
    text-decoration: none;
    text-transform: uppercase;
    letter-spacing: 1px;
    transition: .4s ease-out;
    &:hover {
        background-color: #fff;
        color: #000;
    }
}

section#tom-atelier { 
    border: 0; 
    padding: 2rem;
    @media (max-width: 576px) {
        h1 { font-size: 1.5rem; padding: 1rem; }
    }
}

section#contact {
    justify-content: center;
    gap: 2rem;
    #logo-cover {
        z-index: 10;
        height: 20rem;
        @media (max-width: 768px) {
            height: 5rem;
        }
    }
    #tom-atelier-cover {
        z-index: 10;
        height: 5rem;
        @media (max-width: 768px) {
            height: 3rem;
        }
    } 

    a {
        color: inherit;
        text-decoration: none;
        &:hover {
            color: #E63824;
        }
    }
    #contact-data {
        display: flex;
        flex-direction: column;
        gap: 2rem;
        font-size: 1.5rem;
    }

    #contact-mother { text-align: center; text-wrap:balance; }
 
}